<template>
  <div class="my-input" :style="style">
    <textarea ref="domTextarea" :style="{ ...textAreaStyle, height }" :rows="_rows" :placeholder="placeholder"
      :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
    <span :class="{ border: hasBorder }"></span>
  </div>
</template>

<script>
import calcTextareaHeight from '../utils/calcTextareaHeight'

export default {
  emits: ['update:modelValue'],
  props: {
    style: Object,
    textAreaStyle: Object,
    hasBorder: {
      type: Boolean,
      default: true,
    },
    modelValue: String,
    placeholder: String,
    rows: Number,
  },
  data() {
    return {
      _rows: this.rows,
      height: 'auto',
    }
  },
  watch: {
    modelValue: {
      handler() {
        this.height = calcTextareaHeight(this.$refs.domTextarea, this.rows).height
      },
      flush: 'post',
    },
  },
  mounted() {
    this.height = calcTextareaHeight(this.$refs.domTextarea, this.rows).height
  },
}
</script>

<style lang="scss" scoped>
.my-input {
  width: 90%;
  margin: 10px auto;
  position: relative;
  display: flex;
  align-items: center;
  font-size: 16px;

  textarea {
    width: 100%;
    padding: 12px 16px;
    z-index: 1;
    position: relative;
    font-size: inherit;
    text-align: inherit;
    line-height: inherit;

    border: none;
    outline: none;
    box-sizing: content-box;
    background-color: transparent;
  }

  .border {
    z-index: 0;
    top: 0px;
    left: 0px;
    position: absolute;

    height: 100%;
    width: 100%;
    box-sizing: border-box;

    transition: all 0.26s ease;

    border-radius: 3px;
    border: 1px solid transparent;
  }

  textarea:hover~.border {
    border: 1px dashed #2378ff;
  }

  textarea:focus~.border {
    border: 1px solid #2378ff;
  }
}
</style>
